<template>
  <div>
    <header-tab></header-tab>
    <van-search
      v-model="value"
      placeholder="搜索产品名称/目的地"
      input-align="center"
    />
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
      <van-swipe-item>
        <img
          src="https://n1-q.mafengwo.net/s10/M00/96/BE/wKgBZ1lQ4xCAN_0GAAGB1uhlaoU51.jpeg?imageMogr2%2Fthumbnail%2F%21750x240r%2Fgravity%2FCenter%2Fcrop%2F%21750x240%2Fquality%2F90"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://p1-q.mafengwo.net/s9/M00/C3/03/wKgBs1hOf_GAdpB3AAF3xV1Qk4829.jpeg?imageMogr2%2Fthumbnail%2F%21750x240r%2Fgravity%2FCenter%2Fcrop%2F%21750x240%2Fquality%2F90"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://n1-q.mafengwo.net/s9/M00/6F/DC/wKgBs1hXpweAMBTIAAPqcgR5mVY25.jpeg?imageMogr2%2Fthumbnail%2F%21750x240r%2Fgravity%2FCenter%2Fcrop%2F%21750x240%2Fquality%2F90"
        />
      </van-swipe-item>
    </van-swipe>

    <div class="container">
      <ul class="ulone">
        <li>
          <img
            src="https://p1-q.mafengwo.net/s9/M00/25/A0/wKgBs1e66GSAHL4EAAANMuKo3uw227.png"
          /><br />
          <span>景点门票</span>
        </li>
        <li>
          <img
            src="https://b1-q.mafengwo.net/s9/M00/A5/00/wKgBs1e8DtuAL072AAANFc-mbTU587.png"
          /><br />
          <span>一日游</span>
        </li>
        <li>
          <img
            src="https://n1-q.mafengwo.net/s9/M00/A5/C5/wKgBs1e8D9mAOagmAAALsBHRmTA476.png"
          /><br />
          <span>酒店套餐</span>
        </li>
        <li>
          <img
            src="https://p1-q.mafengwo.net/s9/M00/26/A0/wKgBs1e66nqAWowMAAANvhXlocM209.png"
          /><br />
          <span>有WIFI</span>
        </li>
      </ul>
      <ul class="ultwo">
        <li>
          <img
            src="https://b1-q.mafengwo.net/s9/M00/A5/2F/wKgBs1e8DxyAEGlrAAAOV4m9fgU361.png"
          /><br />
          <span>演出展览</span>
        </li>
        <li>
          <img
            src="https://p1-q.mafengwo.net/s9/M00/A5/3D/wKgBs1e8Dy6ANf2zAAAOQDkr9h0173.png"
          /><br />
          <span>接送机</span>
        </li>
        <li>
          <img
            src="https://b1-q.mafengwo.net/s9/M00/2B/D7/wKgBs1e68yyAOunPAAALzO7l4OM536.png"
          /><br />
          <span>电话卡</span>
        </li>
        <li>
          <img
            src="https://n1-q.mafengwo.net/s9/M00/A5/50/wKgBs1e8D0yAFrvYAAALeK_2ZPo816.png"
          /><br />
          <span>交通卡</span>
        </li>
      </ul>
    </div>

    <!-- 选项卡 -->
    <van-tabs v-model="active">
      <van-tab title="热门">
        <div class="mddlist">
          <a href="">普吉岛</a>
          <a href="">日本</a>
          <a href="">三亚</a>
          <a href="">丽江</a>
          <a href="">台湾</a>
          <a href="">香港</a>
          <a href="">哈尔滨</a>
          <a href="">首尔</a>
          <a href="">新加坡</a>
          <a href="">上海</a>
          <a href="">沙巴</a>
          <a href="">桂林</a>
        </div>
      </van-tab>
      <van-tab title="东南亚">
        <div class="mddlist">
          <a href="">泰国</a>
          <a href="">新加坡</a>
          <a href="">马来西亚</a>
          <a href="">越南</a>
          <a href="">巴厘岛</a>
          <a href="">菲律宾</a>
          <a href="">柬埔寨</a>
          <a href="">兰卡威</a>
          <a href="">芽庄</a>
          <a href="">斯里兰卡</a>
          <a href="">曼谷</a>
          <a href="">沙巴</a>
        </div>
      </van-tab>
      <van-tab title="欧美澳">
        <div class="mddlist">
          <a href="">美国</a>
          <a href="">西班牙</a>
          <a href="">迪拜</a>
          <a href="">帕劳</a>
          <a href="">澳大利亚</a>
          <a href="">新西兰</a>
          <a href="">法国</a>
          <a href="">意大利</a>
          <a href="">英国</a>
          <a href="">毛里求斯</a>
          <a href="">悉尼</a>
          <a href="">黄金海岸</a>
        </div>
      </van-tab>
      <van-tab title="国内">
        <div class="mddlist">
          <a href="">云南</a>
          <a href="">长白山</a>
          <a href="">四川</a>
          <a href="">西安</a>
          <a href="">厦门</a>
          <a href="">张家界</a>
          <a href="">桂林</a>
          <a href="">浙江</a>
          <a href="">雪乡</a>
          <a href="">北京</a>
          <a href="">珠海</a>
          <a href="">漠河</a>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 自由行攻略 -->
    <p class="item-hd">
      自由行攻略 <br />
      京城十大胡同
    </p>
    <div class="localguide">
      <img
        src="https://n1-q.mafengwo.net/s10/M00/95/C5/wKgBZ1i5OImAQyseAACzRyMASOo96.jpeg?imageMogr2%2Fthumbnail%2F%21670x340r%2Fgravity%2FCenter%2Fcrop%2F%21670x340%2Fquality%2F90"
        alt=""
      />
    </div>
    <div class="itemlist3">
      <div>
        <img
          src="https://p1-q.mafengwo.net/s12/M00/BD/26/wKgED1uTfYCACOneAAB5rwqdztA94.jpeg?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>北京必体验之天安门广场+...</span><br />
        <b>￥198</b>起/人
      </div>
      <div>
        <img
          src="https://n1-q.mafengwo.net/s10/M00/3F/B5/wKgBZ1o7SFyATw9PAAF8J116dEA22.jpeg?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>北京故宫电子票（北京必...</span><br />
        <b>￥40</b>起/人
      </div>
      <br />
      <div>
        <img
          src="https://p1-q.mafengwo.net/s13/M00/04/4D/wKgEaVzHssqAZVohAAR_9QgSUI8151.gif?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>可选五环内上门接 北京八...</span><br />
        <b>￥120</b>起/人
      </div>
    </div>
    <!-- 仙本那你的密码 -->
    <p class="item-hd">仙本那的秘密</p>
    <div class="localguide">
      <img
        src="https://p1-q.mafengwo.net/s9/M00/AF/D7/wKgBs1fY8XuAWvhTAAr5IoWhVlE50.jpeg?imageMogr2%2Fthumbnail%2F%21670x340r%2Fgravity%2FCenter%2Fcrop%2F%21670x340%2Fquality%2F90"
        alt=""
      />
    </div>
    <div class="itemlist3">
      <div>
        <img
          src="https://n1-q.mafengwo.net/s11/M00/22/48/wKgBEFpeyyqARhOHAAJ9YtTAgmc74.jpeg?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>沙巴亚庇拼车接机/送机服...</span><br />
        <b>￥1</b>起/人
      </div>
      <div>
        <img
          src="https://n1-q.mafengwo.net/s11/M00/EF/E4/wKgBEFtj9M2ABcIaAAEEFH_884M53.jpeg?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>仙本那 马布岛MWB轻奢海...</span><br />
        <b>￥3250</b>起/人
      </div>
      <br />
      <div>
        <img
          src="https://p1-q.mafengwo.net/s11/M00/02/31/wKgBEFtsGXOAD9qCAE_vjYMjqxs707.gif?imageMogr2%2Fthumbnail%2F%21210x140r%2Fgravity%2FCenter%2Fcrop%2F%21210x140%2Fquality%2F90"
          alt=""
        /><br />
        <span>诗巴丹潜水名额·网红中文...</span><br />
        <b>￥1250</b>起/人
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
    };
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 130px;
  text-align: center;
}
.van-swipe-item img {
  width: 100%;
}
.container {
  width: 100%;
  height: 200px;
  /* background: red; */
}
.container li {
  margin-top: 25px;
  flex-grow: 1;
}
.container li img {
  width: 44px;
  height: 44px;
  margin: 0 auto;
}
.ulone,
.ultwo {
  width: 90%;
  height: 100px;
  display: flex;
  margin-left: 10%;
}
.mddlist {
  width: 100%;
  height: 154px;
  padding: 15px;
}
.mddlist a {
  display: inline-block;
  width: 77px;
  line-height: 32px;
  background: #f7f7f7;
  text-align: center;
  margin: 4.5px;
}
.item-hd {
  width: 100%;
  line-height: 40px;
  padding: 20px;
  font-size: 24px;
}
.localguide {
  width: 90%;
  margin: 0 auto;
}
.localguide img:nth-child(1) {
  width: 100%;
  position: relative;
}
.itemlist3 {
  width: 90%;
  height: 200px;
  margin: 0 auto;
  display: flex;
}
.itemlist3 div {
  width: 30%;
  flex-grow: 1;
  text-align: center;
}
.itemlist3 img {
  width: 95%;
  margin: 10px auto;
}
b {
  color: #ff7800;
}
</style>
